<template>
  <div>
  <div id="app">
    <div class="wrap_fixed">
      <b-avatar variant="success" text="T" class="d-block" @click="pageScrollTop" :button="avatarButton"></b-avatar>
      <b-avatar variant="info" text="B" class="d-block mt-1" @click="pageScrollBottom" :button="avatarButton"></b-avatar>
    </div>
    <router-view></router-view>
  </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      avatarButton: true
    }
  },
  methods: {
    pageScrollTop: function () {
      const id = setInterval(function () {
        window.scrollBy(0, -40)
        if (document.body.scrollTop + document.documentElement.scrollTop === 0) { clearInterval(id) }
      }, 1)
      // window.scroll(0, -10)
    },
    pageScrollBottom: function () {
      const id = setInterval(function () {
        window.scrollBy(0, 40)
        var heightAll = document.body.clientHeight
        var avaiheight = window.innerHeight
        var scrollTop = document.documentElement.scrollTop
        var x = heightAll - avaiheight - scrollTop
        if (x <= 0) {
          clearInterval(id)
        }
      }, 1)
    }
  }
}
</script>

<style>
  .wrap_fixed {
    position: fixed;
    bottom: 10%;
    right: 5px;
    z-index: 999;
  }
  body{
    background-color: whitesmoke ;
    font-family: font3;
  }
  h3{
    font-family: font2 !important;
    font-weight: 500;
    /*font-size: 22px !important;*/
  }
  h2{
    font-family: fontH2 !important;
    /*font-size: 23px !important;*/
    font-weight: 600;
  }
  .useFont2{
    font-family: font2 !important;
  }
  @font-face {
    font-family: 'font3';
    src: url('./assets/fonts/font3.woff');
    font-weight: normal;
    font-style: normal;
     }
  @font-face {
    font-family: 'font2';
    src: url('./assets/fonts/font2.woff');
    font-weight: normal;
    font-style: normal;
     }
  @font-face {
    font-family: 'fontH2';
    src: url('./assets/fonts/fontH2.TTF');
    font-weight: normal;
    font-style: normal;
     }
  pre.ql-syntax{
    background-color: white;
    padding: 15px;
    border: 1px solid black;
    border-radius: 10px;
  }
</style>
